// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, TextInput, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

import pureRender from 'pure-render-decorator';
import Swiper from 'react-native-swiper';
import { Actions } from 'react-native-router-flux';
import * as ActionTypes from '../../constants/constants.js'

import { CacheImage } from 'react-native-rn-cacheimage'

// antd 按需加载
import { Tabs, Toast, Grid, WhiteSpace } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { billboard, goodsNew } from './module/module.js'
import { category } from '../Category/module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, Merchants, ImportantTitle, VipCard, Title, RnFlatList, RnImage, Good } from '../../components/index.js'

// 引入专用组件
import { } from './components/index.js'

// 引入工具包
import { press, size, longitude, latitude, ScreenWidth, path, ActionsRouter } from '../../util/utils.js'


class Home extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      // searchBackgroundColor: 'transparent',
      searchBackgroundColor: '#e43130',
    }
    this.billboard = billboard.bind(this)
    this.goodsNew = goodsNew.bind(this)
    this.category = category.bind(this)
  }

  componentDidMount() {
    const { user, goodsNew: { nextPage, pageSize } } = this.props
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    this.billboard()
    this.category()
    this.goodsNew({
      pageNum: nextPage,
      pageSize
    })
    // });
  }

  renderSwiper() {
    const { billboard } = this.props
    return (
      <Swiper
        style={{
          width: ScreenWidth,
          height: size(240),
        }}
        showsButtons={false}
        dot={<View style={{ backgroundColor: 'rgba(255,255,255,.2)', width: 6, height: 6, borderRadius: 3, margin: 3, marginBottom: -20 }} />}
        activeDot={<View style={{ backgroundColor: '#fff', width: 12, height: 6, borderRadius: 3, margin: 3, marginBottom: -20 }} />}
      >
        {billboard.map((item, index) => {
          console.log(item)
          return (
            <TouchableOpacity
              onPress={() => {
                ActionsRouter('goodDetails', { id: item.url.split("=")[1] })
              }}
              key={index}
              style={{
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'row',
              }}>
              <RnImage resizeMode='cover' style={{ width: ScreenWidth, height: size(240) }} uri={item.pic} />
            </TouchableOpacity>
          )
        })}
      </Swiper>
    )
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { goodsNew: { pageSize } } = this.props
    this.goodsNew({
      pageNum: 1,
      pageSize,
      refresh: true
    }).then(res => {
      this.setState({ refreshing: false });
    })
  }

  onEndReached = () => {
    console.log('到底了')
    const { user, goodsNew: { nextPage, pageSize, list, total } } = this.props
    if (list.length < total) {
      this.goodsNew({
        pageNum: nextPage,
        pageSize
      })
    }
  }

  onScroll = (e) => {
    const { searchBackgroundColor } = this.state
    if (e.nativeEvent.contentOffset.y >= size(366) - 44) {
      this.setState({
        searchBackgroundColor: '#e43130'
      })
    } else {
      this.setState({
        searchBackgroundColor: 'transparent'
      })
    }
  }


  render() {
    const { refreshing, searchBackgroundColor } = this.state
    const { dispatch, goodsNew, category } = this.props
    return (
      <View style={[Style.container]}>
        <Status />
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 99,
          backgroundColor: searchBackgroundColor
        }}>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
              Actions.category()
            }}
          >
            <Icon name="md-menu" size={22} color="#fff" />
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 1,
              height: 30,
            }}
            onPress={() => {
              Actions.search()
            }}
          >
            <View
              style={{
                paddingVertical: 0,
                paddingHorizontal: 15,
                borderRadius: 15,
                height: 30,
                backgroundColor: '#fff',
              }}
            >
              <Text style={{ fontSize: 12, color: '#232326', lineHeight: 30, }}>请输入商品信息[书名/ISBN/作者/出版社]</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
              Actions.shoppingCart()
            }}
          >
            <FontAwesome name="shopping-cart" size={22} color="#fff" />
          </TouchableOpacity>
        </View>
        <RnFlatList
          style={{
          }}
          columnWrapperStyle={{
            backgroundColor: '#f0f2f5',
            paddingLeft: 3,
            paddingRight: 3,
            paddingTop: 3,
          }}
          // onScroll={this.onScroll}
          refreshing={refreshing}
          onRefresh={this.onRefresh}
          onEndReached={this.onEndReached}
          numColumns={2}
          removeClippedSubviews={true}
          datas={goodsNew}
          ListHeaderComponent={
            <View style={{}}>
              <View style={{ height: 44 }} />
              {this.renderSwiper()}
              <View style={{
                marginTop: 10,
                flexDirection: 'row',
                alignItems: 'center',
              }}>
                {category.map((item, index) => {
                  return (
                    <TouchableOpacity
                      key={index}
                      style={{ flex: 1 }}
                      onPress={() => {
                        if (item.mold == 1) {
                          Actions.spot()
                        }
                        if (item.mold == 3) {
                          Actions.purchasing()
                        }
                        if (item.mold == 4) {
                          Actions.magazine()
                        }
                        dispatch({
                          type: ActionTypes.categoryDetails,
                          data: item
                        })
                      }}
                    >
                      <View style={{
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}>
                        <RnImage resizeMode='cover' style={{ width: size(180), height: size(180) }} uri={item.pic} />
                        <Text style={{ fontSize: 10, color: '#666', lineHeight: 30, textAlign: 'center' }}>{item.name}</Text>
                      </View>
                    </TouchableOpacity>
                  )
                })}
              </View>
              <Title
                title="新品上市"
                subTitle="New products listed"
              />
              <WhiteSpace />
            </View>
          }
          renderItem={({ item }) => <Good type="good" data={item} />}
        />
      </View >
    );
  }
}



export default connect(({ user, goodsNew, billboard, category }) => ({ user, goodsNew, billboard, category }))(pureRender(Home))
